<template>
  <div>
    <!-- views/Nav.vue -->
<el-menu mode="horizontal" default-active="3"
background-color="#444" text-color="#aaa" active-text-color="#fff">
    <el-menu-item index="1">指南</el-menu-item>
    <el-menu-item index="2">组件</el-menu-item>
    <el-submenu index="3">
        <template slot="title">主题</template>
        <el-menu-item index="3-1">中国红</el-menu-item>
        <el-menu-item index="3-2">炫酷黑</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">资源</el-menu-item>
</el-menu>

<el-menu class="menu" mode="vertical" default-active="3">
    <el-menu-item index="1">指南</el-menu-item>
    <el-menu-item index="2">组件</el-menu-item>
    <el-submenu index="3">
        <template slot="title">主题</template>
        <el-menu-item index="3-1">中国红</el-menu-item>
        <el-menu-item index="3-2">炫酷黑</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">资源</el-menu-item>
</el-menu>
  </div>

</template>
<style scoped>
.menu{
    width:200px;
    height:45px;
}
.menu .el-menu-item {
    height:45px;
    line-height:45px;
}
.el-menu-item.is-active {
    color: #ff4d40;
}
</style>
